.editor-container {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  &.focus-mode {
    div[id^='editor_'] {
      pre.vditor-reset > * {
        opacity: 0.2;
      }
    }
  }

  // #editor {
  //   // 首行 标题强制不显示 扩展的 #
  //   pre.vditor-reset > :nth-child(1) .vditor-ir__marker--heading {
  //     display: none;
  //   }
  // }

  div[id^='editor_'] {
    // 正文行高
    --text-line-height: 28px;
    // 正文字号
    --text-font-size: 16px;
    // 正文字体颜色
    --text-font-color: #333333;
    // 正文字体
    --text-font-family: 'Open Sans', 'Noto Sans SC', Menlo, "Ubuntu Mono", Consolas, "Courier New", "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;
    // 段落下边距
    --p-margin-bottom: 16px;
    // 引用背景
    --blockquote-background: inherit;
    // 引用边框颜色
    --blockquote-border-color: #d8d8d8;
    // 引用字体颜色
    --blockquote-font-color: #aaa;
    // 超链接字体颜色
    --link-font-color: #448aff;
    --ir-bracket-color: #448aff;
    // 粗体字体
    --bold-font-family: 'Open Sans', 'Noto Sans SC', Menlo, "Ubuntu Mono", Consolas, "Courier New", "Microsoft Yahei", "Hiragino Sans GB", "WenQuanYi Micro Hei", sans-serif;

    @mixin hStyle {
      margin: 32px 0 20px;
      font-weight: normal;
      letter-spacing: 1px;
      font-family: var(--bold-font-family);
      &::before {
        cursor: pointer;
      }
    }
  
    border: none;
    display: flex;
    flex-direction: column;
    flex: 1;
    
    .vditor-toolbar {
      display: none;
    }
    .vditor-ir {
      display: flex !important;
      flex-direction: column;
      flex: 1;
    }
    .vditor-reset {
      overflow: visible;
      height: auto;
      flex: 1;
      padding: 0 !important;
      --panel-background-color: transparent;
      line-height: var(--text-line-height);
      font-size: var(--text-font-size);
      color: var(--text-font-color);
      font-family: var(--text-font-family);
      & > h1 {
        font-size: 32px;
        line-height: 44px;
        border: none;
        @include hStyle;
      }
      & > h2 {
        font-size: 28px;
        line-height: 40px;
        border: none;
        @include hStyle;
      }
      & > h3 {
        font-size: 24px;
        line-height: 36px;
        @include hStyle;
      }
      & > h4 {
        font-size: 20px;
        line-height: 32px;
        @include hStyle;
      }
      & > h5 {
        font-size: 16px;
        line-height: 28px;
        @include hStyle;
      }
      & > h6 {
        font-size: 16px;
        line-height: 28px;
        color: #aaaaaa;
        @include hStyle;
      }
      span[data-type='img'] span:first-child {
        padding-left: 25px;
        position: relative;
        &::before {
          display: block;
          content: '';
          width: 20px;
          height: 20px;
          background: url(./file.svg) no-repeat center center;
          background-size: 20px 20px;
          position: absolute;
          left:3px;
          top: 0;
          cursor: pointer;
        }
      }
      span[data-type='a']:not(.vditor-ir__node--expand) {
        padding-right: 25px;
        position: relative;
        &::after {
          display: block;
          content: '';
          width: 20px;
          height: 20px;
          background: url(./link.svg) no-repeat center center;
          background-size: 20px 20px;
          position: absolute;
          right: 3px;
          bottom: 0;
          cursor: pointer;
        }
      }
      blockquote {
        border-color: var(--blockquote-border-color);
        background: var(--blockquote-background);
        color: var(--blockquote-font-color);
        line-height: 24px;
      }
      a {
        color: var(--link-font-color);
        text-decoration: none;
        line-height: 24px;
      }
      p {
        margin-bottom: var(--p-margin-bottom);
      }
      .tag-span {
        background-color: #aaaaaa;
        border-radius: 12px;
        color: #fff;
        padding: 0 8px;
        cursor: pointer;
      }
      pre > code {
        max-height: none !important;
        white-space: break-spaces;
        word-break: break-word;
      }

      // 编辑 代码区域 时，隐藏渲染区域
      .vditor-ir__node.vditor-ir__node--expand .vditor-ir__preview code.hljs {
        display: none;
      }

      // 临时处理 代码段 浅色/深色 模式切换，避免预览 & 编辑区域 样式冲突
      pre {
        .hljs {
          background: #eee;
          color: black;
        }
        .hljs-attr,
        .hljs-built_in,
        .hljs-doctag, 
        .hljs-formula,
        .hljs-meta,
        .hljs-meta-string,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo,
        .hljs-subst,
        .hljs-symbol {
          color: black;
        }
        
        .hljs-link,
        .hljs-emphasis,
        .hljs-attribute,
        .hljs-addition {
            color: #070;
        }
        
        .hljs-strong,
        .hljs-string,
        .hljs-deletion {
            color: #d14;
        }
        
        .hljs-quote,
        .hljs-comment {
            color: #998;
        }
        
        .hljs-section,
        .hljs-title {
            color: #900;
        }
        
        .hljs-class .hljs-title,
        .hljs-type {
            color: #458;
        }
        
        .hljs-variable,
        .hljs-template-variable {
            color: #336699;
        }
        
        .hljs-bullet {
            color: #997700;
        }
        
        .hljs-meta {
            color: #3344bb;
        }
        
        .hljs-code,
        .hljs-number,
        .hljs-literal,
        .hljs-keyword,
        .hljs-selector-tag {
            color: #099;
        }
        
        .hljs-regexp {
            background-color: #fff0ff;
            color: #880088;
        }
        
        .hljs-symbol {
            color: #990073;
        }
        
        .hljs-tag,
        .hljs-name,
        .hljs-selector-id,
        .hljs-selector-class {
            color: #007700;
        }
      }
    }
    .vditor-ir pre.vditor-reset:focus {
      background-color: inherit;
    }
    
    &.vditor--dark {
      // 背景颜色
      --panel-background-color: transparent;
      --text-font-color: #f0f0f0;
      --blockquote-border-color: #555;
      --blockquote-font-color: #969696;
      --blockquote-background: none repeat scroll 0 0 rgba(51,51,51,.5);
      --preview-background-color: #333;
      --second-color: #f0f0f0;

      table {
        tr {
          background-color: #2a2a2a;
          border-color: #404040;
          td, th {
            border-color: #404040;
          }
        }
        tbody tr:nth-child(2n) {
          background-color: #2a2a2a;
        }
      }
      .vditor-reset code:not(.hljs):not(.highlight-chroma) {
        background-color: #2a2a2a;
      }
      .tag-span {
        background-color: #555555;
      }

      pre {
        .hljs {
          background-color: #404040;
          color: #f0f0f0;
        }
        .hljs-code,
        .hljs-emphasis,
        .hljs-strong,
        .hljs-tag {
          color: #f0f0f0;
        }
        
        .hljs-comment,
        .hljs-quote {
            color: #5c6370;
        }
        
        .hljs-doctag,
        .hljs-keyword,
        .hljs-formula {
            color: #c678dd;
        }
        
        .hljs-section,
        .hljs-name,
        .hljs-selector-tag,
        .hljs-deletion,
        .hljs-subst {
            color: #e06c75;
        }
        
        .hljs-literal {
            color: #56b6c2;
        }
        
        .hljs-string,
        .hljs-regexp,
        .hljs-addition,
        .hljs-attribute,
        .hljs-meta-string {
            color: #98c379;
        }
        
        .hljs-built_in,
        .hljs-class .hljs-title {
            color: #e6c07b;
        }
        
        .hljs-attr,
        .hljs-variable,
        .hljs-template-variable,
        .hljs-type,
        .hljs-selector-class,
        .hljs-selector-attr,
        .hljs-selector-pseudo,
        .hljs-number {
            color: #d19a66;
        }
        
        .hljs-symbol,
        .hljs-bullet,
        .hljs-link,
        .hljs-meta,
        .hljs-selector-id,
        .hljs-title {
            color: #61aeee;
        }
      }
      
      .vditor-hint {
        background-color: #444;
      }
    }
  }
}